<template>
  <q-input
    outlined
    @click="show"
    :model-value="currentMapPose.name"
    :label="label"
  >
    <q-dialog v-model="visible">
      <q-card style="max-height: calc(100vh - 2rem); max-width: 90vw">
        <q-card-section
          class="row items-center q-gutter-x-sm no-wrap overflow-auto"
          style="min-width: 20rem"
        >
          <template v-if="$q.screen.gt.xs">
            <div class="text-h6 text-bold text-center text-grey-7">
              选择导航点
            </div>
            <q-space />
          </template>
          <q-select
            outlined
            dense
            style="min-width: 8rem"
            clearable
            v-model="group"
            :options="groups"
            behavior="menu"
            label="选择地图组"
          />
          <q-select
            v-model="map"
            :options="options"
            label="选择地图"
            @filter="filterFn"
            :use-input="!map"
            clearable
            behavior="menu"
            outlined
            dense
            style="min-width: 8rem"
            option-label="name"
          />
        </q-card-section>
        <q-separator />
        <q-slide-transition>
          <div v-if="mapPoses.length !== 0">
            <q-card-section
              style="
                max-height: calc(100vh - 10rem);
                min-height: 10rem;
                min-width: 15rem;
                overflow: auto;
              "
              class="row items-center justify-center"
            >
              <q-card
                v-for="mapPose in mapPoses"
                v-bind:key="mapPose.id"
                class="q-ma-sm"
                @click="select(mapPose)"
                style="min-width: 15rem"
              >
                <q-card-section class="row items-center">
                  <div
                    class="text-h6 text-bold text-black no-wrap overflow-hidden"
                    style="width: calc(100%); height: 2rem"
                  >
                    {{ mapPose.name }}
                  </div>
                </q-card-section>
                <q-separator />
                <q-list>
                  <q-item
                    dense
                    v-for="item in mapPoseItems"
                    v-bind:key="item.key"
                    clickable
                    v-ripple
                  >
                    <q-item-section>{{ item.title }}</q-item-section>
                    <q-item-section side>{{
                      mapPose[item.key]
                    }}</q-item-section>
                  </q-item>
                  <q-item dense clickable v-ripple>
                    <q-item-section>连接点数</q-item-section>
                    <q-item-section side>{{
                      mapPose.connectedPose.length
                    }}</q-item-section>
                  </q-item>
                </q-list>
              </q-card>
            </q-card-section>
          </div>
        </q-slide-transition>
      </q-card>
    </q-dialog>
  </q-input>
</template>

<script>
import { onMounted, ref, watch, computed } from "vue";
import { api } from "boot/axios";
import { useAPIStore } from "stores/api";

const mapPoseItems = [
  { title: "点位类型", key: "type" },
  { title: "是否可转向", key: "turnable" },
  { title: "优先度", key: "priority" },
];

export default {
  name: "MapPoseSelector",
  props: {
    modelValue: String,
    label: { type: String, default: "选择导航点" },
    filter: String,
    enableDialog: { type: Boolean, default: true },
  },
  setup(props, context) {
    const visible = ref(false);

    const currentMapPose = ref({});
    const map = ref();
    const mapList = ref([]);
    const groups = ref([]); // 地图分组的选项
    const group = ref(null); // 地图分组
    const mapOptions = computed(() =>
      group.value === null
        ? mapList.value
        : mapList.value.filter((item) => item.group === group.value)
    );
    const options = ref([]);

    const mapPoses = ref([]);
    function getMapPoseByID() {
      if (props.modelValue !== "") {
        api
          .get(useAPIStore().mapUrl + "mapPose/id/" + props.modelValue)
          .then((rs) => {
            currentMapPose.value = rs.data;
            api
              .get(
                useAPIStore().mapUrl + "map/id/" + currentMapPose.value.mapID
              )
              .then((rs) => {
                map.value = rs.data;
              });
          });
      }
    }
    watch(map, (value) => {
      if (value) {
        api
          .get(useAPIStore().mapUrl + "mapPose/mapID/" + value.id)
          .then((rs) => {
            mapPoses.value = rs.data;
          });
      } else {
        mapPoses.value = [];
      }
    });
    function getMaps() {
      api.get(useAPIStore().mapUrl + "map/all/simple").then((rs) => {
        mapList.value = rs.data;
      });
      api.get(useAPIStore().mapUrl + "map/groups").then((rs) => {
        groups.value = rs.data;
      });
    }
    onMounted(() => {
      getMapPoseByID();
      getMaps();
    });

    return {
      map,
      options,
      group,
      groups,
      mapPoses: computed(() =>
        props.filter === undefined
          ? mapPoses.value
          : mapPoses.value.filter(
              (item) => item.type && item.type.includes(props.filter)
            )
      ),
      mapPoseItems,
      currentMapPose,
      visible,
      show() {
        if (props.enableDialog) {
          getMapPoseByID();
          visible.value = true;
        }
      },
      select(mapPose) {
        currentMapPose.value = mapPose;
        context.emit("update:modelValue", currentMapPose.value.id);
        visible.value = false;
      },
      filterFn(val, update) {
        if (val === "") {
          update(() => {
            options.value = mapOptions.value;
          });
          return;
        }

        update(() => {
          const needle = val.toLowerCase();
          options.value = mapOptions.value.filter(
            (v) => v.name.toLowerCase().indexOf(needle) > -1
          );
        });
      },
    };
  },
};
</script>
